<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <title>Easy-Admin</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <link rel="icon" th:href="@{/static/favicon.ico}">
    <link rel="stylesheet" th:href="@{/static/element/index.css}">
</head>
<style>
    body {

        background-color: #ffffff;
        background-image: url("../static/image/login_bg.jpg");
        background-size: cover;
    }
</style>
<body>
<div id="app">
    <template>
        <div>
            <el-button style="float: right" @click="switchBg">切换</el-button>
        </div>
        <div style="display: flex;flex-direction: row;align-items: center">
            <div class="login-page" v-loading="loading">
                <el-form :model="loginForm" :rules="rules" ref="loginForm" label-position="left" label-width="0px">

                    <img class="avatar"
                         src="https://mars-factory.oss-cn-beijing.aliyuncs.com/2023/12/27/fdf5a0c21dc64830b16f84607d631e9dlogo.jpg"
                         style="" alt="">
                    <div style="display: flex;flex-direction: column;align-items: center;justify-content: center">
                        <div class="title" style="color: #303133;font-weight: bold">{{sysConfigInfo.systemName}}</div>
                        <div class="" style="color: gray">{{sysConfigInfo.slogan}}</div>
                    </div>

                    <el-form-item prop="userName" style="margin-top: 10%">
                        <el-input type="text" prefix-icon="el-icon-user-solid" style="color: black;font-size: 16px"
                                  v-model="loginForm.userName" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input type="password" prefix-icon="el-icon-s-goods" style="color: black;font-size: 16px"
                                  v-model="loginForm.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;margin-top: 5%">
                        <el-form-item prop="code">
                            <el-input class="code-input-item" type="text" prefix-icon="el-icon-s-cooperation"
                                      style="color: black;font-size: 16px;"
                                      v-model="loginForm.code" placeholder="请输入验证码"
                                      @keyup.enter.native="login()"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <img :src="codeUrl" @click="getCode" style="margin-top: 15px;cursor: pointer"
                                 alt="">
                        </el-form-item>
                    </div>
                    <div style="color: #323131" v-if="sysConfigInfo.registerSwitch">还没有账号？立即<a href="/register">注册</a>
                    </div>
                    <el-form-item style="width:100%;margin-top: 3%">
                        <div style="display: flex;flex-direction: row;align-items: center;justify-content: space-around">
                            <el-button class="login-btn" type="primary" style="width:100%;" @click="reset"
                                       icon="el-icon-delete">重置
                            </el-button>
                            <el-button class="login-btn" type="primary" style="width:100%;" @click="login"
                                       @keyup.enter="login"
                                       icon="el-icon-user" v-loading="loginLoading">登录
                            </el-button>
                        </div>

                    </el-form-item>
                </el-form>
            </div>
        </div>


    </template>
    <div style="color: gray;text-align: center;position: fixed;bottom: 20px;margin-left: 50%;transform: translate(-50%)">
        Copyright &copy; 2023.{{sysConfigInfo.copyright}} All rights reserved.
    </div>
</div>
</body>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/request.js}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsencrypt/2.3.1/jsencrypt.min.js"></script>
<script th:src="@{/static/api/login.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                loginLoading: false,
                loginForm: {
                    userName: '',
                    password: '',
                    code: '',
                    uuid: '',
                },
                codeUrl: "",
                sysConfigInfo: {
                    registerSwitch: false
                },
                rules: {
                    userName: [{required: true, message: '请输入用户名', trigger: 'blur'}],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'}],
                },
                checked: false,
                buttons: [],
                bgList:['../static/image/login-background.png','../static/image/login_bg.jpg','../static/image/bg22.jpg'],
            }
        },
        beforeCreate: function () {
            if (self !== top) {
                top.location.href = self.location.href;
            }
        },
        created() {
            this.getConfigInfo();
            this.getCode();

        },
        methods: {
            switchBg(){
                const randomIndex = Math.floor(Math.random() * this.bgList.length);
                var bgImage=this.bgList[randomIndex]
                // 设置背景图片
                document.body.style.backgroundImage = `url('${bgImage}')`;
            },
            getConfigInfo() {
                this.loading = true
                requests.get("/admin/sysConfig/sysInfo").then(res => {
                    this.loading = false
                    this.sysConfigInfo = res.data
                    localStorage.setItem("publicKey", res.data.publicKey)
                })
            },
            getCode() {
                getCaptcha().then(res => {
                    if (res.code === "200") {
                        this.codeUrl = "data:image/gif;base64," + res.data.img;
                        this.loginForm.uuid = res.data.uuid;
                    }
                })
            },
            reset() {
                this.loginForm = {}
            },
            cacheData(data) {
                localStorage.setItem('mars-token', JSON.stringify(data.token));
                localStorage.setItem('mars-sysUser', JSON.stringify(data.sysUser));
                localStorage.setItem('mars-sysMenu', JSON.stringify(data.sysMenu));
                localStorage.setItem('mars-sysButtons', JSON.stringify(this.buttons));
            },

            login() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        this.loginLoading = true
                        login(this.loginForm).then((res) => {
                            if (res.code === '200') {
                                this.loginLoading = false;
                                this.parseTreeJson(res.data.sysMenu);
                                this.cacheData(res.data)
                                this.$notify({
                                    title: '成功',
                                    message: '登录成功',
                                    type: 'success'
                                });
                                setTimeout(() => {
                                    parent.location.href = '/';
                                }, 100)
                            } else {
                                this.loginLoading = false;
                                this.getCode()
                            }
                        });
                    } else {
                        return false;
                    }
                })
            },
            parseTreeJson(treeNodes) {
                for (let i = 0; i < treeNodes.length; i++) {
                    if (treeNodes[i].url) {
                        this.buttons.push(treeNodes[i].url);
                    }
                    let child = treeNodes[i].children;
                    if (child && child.length > 0) {
                        this.parseTreeJson(child);
                    }
                }
            }

        }
    })
</script>
<style>


    .code-input-item .el-input__inner {
        border-radius: 0;
    }

    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50px;
        margin-top: -100px;
        margin-left: 50%;
        transform: translate(-50%);
        z-index: 10
    }

    .login-page {
        margin-top: 10%;
        margin-left: 60%;
        width: 20%;
        height: 45%;
        border-radius: 5px;
        padding: 35px 35px 15px;
        background: white;
        color: white;
        z-index: 1;
        border: 1px solid #eaeaea;
        box-shadow: 0 0 25px #cac6c6;
        opacity: 0.6
    }

    .login-btn {
        /*background-color: var(--baseBackground);*/
        background-color: var(--baseBackground);
        color: white;
    }

    .title {
        font-size: 25px;
        font-weight: bold;
        text-align: center;
        margin-bottom: 15px;
        color: #ffffff;
    }

</style>
</html>
